<script setup>
  import { persitionStore } from '@/store/persition.js'
  // 处方信息保存
  const persitionInfo = persitionStore()

  // 处方信息
  const props = defineProps(['persistionInfo'])
  console.log(props.persistionInfo)
  persitionInfo.persitionStoreInfo = props.persistionInfo
</script>

<template>
  <!-- 处方消息（22） -->
  <view class="e-prescription">
    <view class="prescription-content">
      <view class="list-title">
        <view class="label">电子处方</view>
        <view class="extra">
          原始处方
          <uni-icons size="16" color="#848484" type="right" />
        </view>
      </view>
      <view class="list-item"
        >{{ props.persistionInfo.msg.prescription.name }}
        {{ props.persistionInfo.msg.prescription.genderValue }}
        {{ props.persistionInfo.msg.prescription.age }}岁
        {{ props.persistionInfo.msg.prescription.diagnosis }}</view
      >
      <view class="list-item"
        >开方时间：{{ props.persistionInfo.msg.prescription.createTime }}</view
      >

      <view class="dividing-line"></view>

      <view
        v-for="item in props.persistionInfo.msg.prescription.medicines"
        :key="item.id"
        style="margin-bottom: 10rpx"
      >
        <view class="list-title">
          <view class="label">
            <text class="name">{{ item.name }}</text>
            <text class="unit">{{ item.specs }}</text>
            <text class="quantity">x{{ item.quantity }}</text>
          </view>
        </view>
        <view class="list-item">{{ item.usageDosag }}</view>
      </view>
    </view>
    <navigator
      class="uni-link"
      hover-class="none"
      :url="`/subpack_medicue/payment/payment?id=${props.persistionInfo.msg.prescription.id}`"
    >
      购买药品
    </navigator>
  </view>
</template>

<style lang="scss">
  .e-prescription {
    width: 100%;
    margin-top: 60rpx;
    border-radius: 20rpx;
    background-color: #eaf8f6;

    .prescription-content {
      padding: 30rpx;
      border-radius: 20rpx;
      background-color: #fff;
    }

    .list-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10rpx;
    }

    .list-item {
      margin-bottom: 10rpx;
      font-size: 26rpx;
      color: #848484;
    }

    .label {
      display: flex;
      justify-content: space-between;
      flex: 1;
      font-size: 32rpx;
      color: #121826;

      &.medicine {
        font-size: 30rpx;
        color: #666;
      }
    }

    .unit {
      width: 200rpx;
    }

    .extra {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #848484;
    }

    :deep(.uniui-right) {
      margin-top: 4rpx;
    }

    .dividing-line {
      padding-bottom: 20rpx;
      margin-bottom: 20rpx;
      border-bottom: 1rpx solid #ededed;
    }

    .uni-link {
      text-align: center;
      line-height: 1;
      padding: 30rpx 0;
      color: #16c2a3;
      font-size: 32rpx;
    }
  }
</style>
